<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" v-if="subjects.id && subjects.name">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>
            {{
            subjects.id ? subjects.name : ""
            }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <br />
        <!-- 头部区域 -->
        <el-row>
          <el-col :span="18">
            <!-- 搜索框 -->
            <el-col :span="18">
              <el-form ref="subjectFrom" :model="tagsData" label-width="80px">
                <el-col :span="10">
                  <el-form-item label="目录名称">
                    <el-input class="inputCol" v-model="tagsData.directoryName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="状态">
                    <el-select v-model="tagsData.state" placeholder="请选择">
                      <el-option label="已启用" :value="1"></el-option>
                      <el-option label="已禁用" :value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-col>
            <el-col :span="6">
              <el-button size="small" class="colInput" plain @click="clearall">清除</el-button>
              <el-button size="small" class="colInput" type="primary" @click="getlist">搜索</el-button>
            </el-col>
          </el-col>
          <el-col :span="6">
            <el-button
              type="text"
              class="colright"
              icon="el-icon-back"
              v-if="subjects.id && subjects.name"
              @click="$router.back()"
            >返回学科</el-button>
            <el-button
              class="colright"
              size="mini"
              type="success"
              icon="el-icon-edit"
              @click="addDialogVisible = true"
            >新增标签</el-button>
          </el-col>
        </el-row>
        <!-- 头部区域结束 -->
        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          show-icon
          :closable="false"
          class="infoMessage"
        ></el-alert>

        <!-- end -->
        <!-- 数据 -->
        <!-- 表格 -->
        <el-table stripe style="width: 100%" :data="list">
          <el-table-column align="center" type="index" label="序号" width="90"></el-table-column>
          <el-table-column align="center" prop="subjectName" label="所有学科"></el-table-column>
          <el-table-column align="center" prop="tagName" label="目录名称"></el-table-column>
          <el-table-column align="center" prop="username" label="创建者"></el-table-column>
          <el-table-column align="center" prop="addDate" label="创建时间"></el-table-column>
          <!-- <el-table-column
               align="center"
                prop="totals"
                label="面试题数量">
          </el-table-column>-->
          <el-table-column align="center" prop="state" label="状态">
            <template slot-scope="scope">{{ scope.row.state === 1 ? "已禁用" : "已启用" }}</template>
          </el-table-column>
          <el-table-column prop="address" fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="changeState(scope.row)">
                {{
                scope.row.state === 1 ? "启用" : "禁用"
                }}
              </el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="editTags(scope.row)"
              >修改</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="removeTag(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="block" style="float:right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tagsData.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="tagsData.pagesize"
            background
            layout=" prev, pager, next,sizes, jumper"
            :total="counts"
          ></el-pagination>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <!-- 添加目录弹框 -->
        <el-dialog title="新增目录" :visible.sync="addDialogVisible" width="20%" @close="restDir">
          <!-- 主体区域 -->
          <el-row>
            <el-col>
              <el-form
                :model="directorysForm"
                :rules="directorysFormRules"
                ref="directorysFormRef"
                label-width="80px"
                class="demo-ruleForm"
              >
                <el-form-item v-if="!subjects.id && !subjects.name" class="elform" label="所属学科">
                  <el-select v-model="directorysForm.value" placeholder="请选择" style="width: 100%;">
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in addFrom"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="elform" label="目录名称" prop="directoryName">
                  <el-input
                    v-model="directorysForm.directoryName"
                    placeholder="请输入目录名称"
                    style="width: 100%;"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDirForm">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 修改目录弹框 -->
        <el-dialog title="修改目录" :visible.sync="editDialogVisible" width="20%" @close="restDir">
          <!-- 主体区域 -->
          <el-row>
            <el-col>
              <el-form
                :model="editDirectoryList"
                :rules="directorysFormRules"
                ref="directorysFormRef"
                label-width="80px"
                class="demo-ruleForm"
              >
                <el-form-item v-if="!subjects.id && !subjects.name" class="elform" label="所属学科">
                  <el-select
                    v-model="editDirectoryList.value"
                    placeholder="请选择"
                    style="width: 100%;"
                  >
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in addFrom"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="elform" label="目录名称" prop="directoryName">
                  <el-input
                    v-model="editDirectoryList.directoryName"
                    placeholder="请输入目录名称"
                    style="width: 100%;"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editTagsForm">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  list as getlist,
  remove,
  changeState,
  add,
  update
} from "../../api/hmmm/tags";
import { simple } from "@/api/hmmm/subjects";
import dayjs from "dayjs";
export default {
  name: "tags",
  data () {
    return {
      list: [],
      tagsData: {
        page: 1,
        pagesize: 10,
        directoryName: "",
        state: null
      },
      counts: 0,
      directoryList: [], // 数据列表
      // 数据id'
      infoId: "",
      // 修改请求数据
      editDirectoryList: {
        directoryName: "",
        value: ""
      },
      // 修改的弹框
      editDialogVisible: false,
      // 添加目录的弹框
      addDialogVisible: false,
      // 简单数据列表
      addFrom: [],
      // 添加目录的数据
      directorysForm: {
        directoryName: "",
        // 下拉框的值
        value: ""
      },
      // 验证
      directorysFormRules: {
        directoryName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created () {
    this.getlist();
    this.getAddFrom();
  },
  // 获取地址栏数据
  computed: {
    subjects () {
      return this.$route.query || null;
    }
  },
  methods: {
    // 添加
    async addDirForm () {
      try {
        if (this.subjects.id && this.subjects.name) {
          console.log(111);
          await add({
            subjectID: +this.subjects.id,
            tagName: this.directorysForm.directoryName
          });
          this.$message.success("新增目录成功");
          this.addDialogVisible = false;
          this.getlist();
        } else {
          await add({
            subjectID: this.directorysForm.value,
            tagName: this.directorysForm.directoryName
          });
          this.$message.success("新增目录成功");
          this.addDialogVisible = false;
          this.getlist();
        }
      } catch (e) {
        this.$message.error("新增目录失败");
        console.log(e);
      }
    },
    // 修改
    async editTagsForm () {
      try {
        if (this.subjects.id && this.subjects.name) {
          await update({
            id: this.infoId,
            subjectID: +this.subjects.id,
            directoryName: this.editDirectoryList.directoryName
          });
          this.$message.success("修改目录成功");
          this.editDialogVisible = false;
          this.getlist();
          // console.log();
        } else {
          await update({
            id: this.infoId,
            subjectID: this.editDirectoryList.value,
            tagName: this.editDirectoryList.directoryName
          });
          this.$message.success("修改目录成功");
          this.editDialogVisible = false;
          this.getlist();
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 点击修改显示弹框
    editTags (row) {
      this.editDirectoryList.value = row.subjectID;
      console.log(row.subjectID);
      console.log(row);
      this.infoId = row.id;
      this.editDirectoryList.directoryName = row.directoryName;
      this.editDialogVisible = true;
    },
    // 清除头部搜索框
    clearall () {
      this.tagsData.directoryName = "";
      this.tagsData.state = null;
      this.getlist();
    },
    // 重置表单
    restDir () {
      this.$refs.directorysFormRef.resetFields();
      this.directorysForm.value = "";
    },
    // 切换启用禁用状态
    async changeState (row) {
      try {
        // console.log(111)
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        });
        this.$message.success("操作成功");
        row.state = row.state === 1 ? 0 : 1;
      } catch (e) {
        this.$message.error("请求错误");
      }
    },
    // 获取学科简单列表
    async getAddFrom () {
      try {
        const { data } = await simple();
        this.addFrom = data;
        console.log(data);
      } catch (e) {
        console.log(e);
      }
    },
    // 删除
    async removeTag (row) {
      const configRuselt = await this.$confirm(
        "此操作讲永久删除该学科,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (configRuselt !== "confirm") {
        return this.$message("您取消了删除操作！");
      }
      try {
        const { data } = await remove(row);
        console.log(data);
        this.$message.success("删除成功！");
        this.getlist();
      } catch (e) {
        this.$message.error("删除失败！");
      }
    },
    // 获取目录列表
    async getlist () {
      try {
        this.tagsData.subjectID = this.subjects.id || null;
        console.log(this.tagsData.subjectID);
        const { data } = await getlist(this.tagsData);
        data.items.forEach(item => {
          item.addDate = dayjs(item.addDate).format("YYYY-MM-DD hh:mm:ss");
        });
        this.list = data.items;
        this.counts = data.counts;
        // console.log(data.items)
      } catch (e) {
        this.$message.error("读取失败");
      }
    },
    // 分页
    // 当前以多少条一页
    handleSizeChange (pagesize) {
      this.tagsData.pagesize = pagesize;
      this.getlist();
      // console.log(`每页 ${pagesize} 条`)
    },
    // 当前第几页
    handleCurrentChange (page) {
      this.tagsData.page = page;
      this.getlist();
      // console.log(`当前页: ${page}`)
    }
  }
};
</script>

<style scoped lang='less'></style>
